// import CapsuleChart from '@jiaminghi/data-view-react/es/capsuleChart'
import { Bar, Cell, ComposedChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
import Label from '../Label'
import { tick1 } from './Section2'

const data = [
  { name: '中规上', value: 96 },
  { name: '企业', value: 600 },
]
const colors = ['#37a2da', '#ff9f7f']
export default function Section5(props: React.HTMLAttributes<HTMLElement>) {
  return (
    <Label {...props} title="全市工业企业达到600户, 其中规上企业96户" noBorder>
      <ResponsiveContainer>
        <ComposedChart width={200} height={200} data={data} barSize={12} layout="vertical">
          <Bar dataKey="value" label={{ position: 'right', fill: '#f0f0f0' }}>
            {data.map((_entry, index) => (
              <Cell key={`cell-${index}`} fill={colors[index % 2]} />
            ))}
          </Bar>
          <XAxis type="number" hide domain={[0, 2000]} />
          <YAxis dataKey="name" type="category" axisLine={false} tick={tick1} />
        </ComposedChart>
      </ResponsiveContainer>
    </Label>
  )
}
